<!-- 设备数据 -->
<template>
  <div class="pixel" :style="{ top: `${prop.pixel.top - 10}px`, left: `${prop.pixel.left}px` }">
    <div class="triangle"></div>
    <div class="header">
      <div class="header_left">{{ state.info && state.info.mc }}({{ state.index }}/{{ state.length }})</div>
      <div class="header_right">
        <SvgIcon name="left" width="20px" height="20px" color="#ffffff" @click="handleLeft" />
        <SvgIcon name="right" width="20px" height="20px" color="#ffffff" @click="handleRight" />
        &nbsp;
        &nbsp;
        <SvgIcon name="close" width="20px" height="20px" color="#ffffff" @click="close" />
      </div>
    </div>
    <ul class="list">
      <li class="item" v-for="(item, index) in state.list" :key="index" :class="{ actions: !item.item }">
        <template v-if="item.item">
          <div class="key">{{ item.key }}</div>
          <div class="value">{{ item.item }}</div>
        </template>
      </li>
    </ul>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, reactive } from 'vue'
import { GroupType } from '@/uilts'
const state = reactive<any>({
  index: 1,
  length: 0,
  info: null,
  list: []
})
const prop = defineProps(['pixel', 'features'])
const $emit = defineEmits(['close'])
//  关闭
const close = () => {
  $emit('close')
}
//  数据切换
const indexSwitch = () => {
  state.list = []
  state.info = prop.features[state.index - 1].properties
  for (const key in state.info) {
    if (Object.prototype.hasOwnProperty.call(state.info, key)) {
      const item = state.info[key];
      if (key === 'mc') {
        state.list.push({
          key: '名称',
          item
        })
      }
      if (key === 'type') {
        state.list.push({
          key: '类型',
          item: GroupType(item)
        })
      }
      if (key === 'ssgqmc') {
        state.list.push({
          key: '所属工区',
          item
        })
      }
      if (key === 'ssjdmc') {
        state.list.push({
          key: '所属街道',
          item
        })
      }
      if (key === 'ssxzqmc') {
        state.list.push({
          key: '所属行政区',
          item
        })
      }
      if (key === 'lng') {
        state.list.push({
          key: '经纬度',
          item: `${item},${state.info['lat']}`
        })
      }
      if (key === 'sspdssmc') {
        state.list.push({
          key: '配电设施',
          item
        })
      }
      if (key === 'dz') {
        state.list.push({
          key: '地址',
          item
        })
      }
    }
  }
}
//  左
const handleLeft = () => {
  if (state.index === 1) {
    return
  }
  state.index--
  indexSwitch()
}
//  右
const handleRight = () => {
  if (state.index === state.length) {
    return
  }
  state.index++
  indexSwitch()
}
onMounted(() => {
  indexSwitch()
  state.length = prop.features.length
})
</script>

<style scoped lang="scss">
.pixel {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 440px;
  background-color: #fff;
  border-radius: 4px 4px 0px 0px;
  z-index: 199;

  .triangle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
  }

  .header {
    width: 100%;
    height: 40px;
    background: #001627;
    border-radius: 4px 4px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;

    .header_left {
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
    }

    .header_right {
      svg {
        display: inline-block;
        cursor: pointer;
      }
    }
  }

  .list {
    padding: 30px;

    .item {
      display: flex;
      margin-bottom: 10px;

      .key {
        width: 80px;
        font-size: 14px;
        margin-right: 20px;
      }

      .value {
        font-size: 14px;
      }
    }

    .actions {
      margin-bottom: 0;
    }
  }
}
</style>